<template>
	<view class="shop-list-wrap page-bg">
		<view class="shop-column">
			<view class="shop-column__item">热销爆品</view>
			<view class="shop-column__item">精品甄选</view>
			<view class="shop-column__item shop-column__active">
				<!--  --><!-- <image class="shop-column__op" src="../../static/common/icon_05.png" mode=""></image> -->
				<view class="shop-column__price">价格</view>
				<!-- <image class="shop-column__op" src="../../static/common/icon_05.png" mode=""></image> -->
			</view>
		</view>
		
		<view class="goods-item goods-list">
			<image class="goods-img" src="../../static/img_01.png"></image>
			<view class="goods-info">
				<view class="goods-title">商品名称商品名称商品名称商品名称商品名称商品名称</view>
				<view class="goods-price">
					<text class="price yuan">399</text>
					<text class="origin-price yuan">399</text>
					<text class="btn once-buy">立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {},
		methods:{
			setActice() {}
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.shop-list-wrap{
		.content-20;
	}
	.shop-column{
		background-color: @f;
		.br;
		.flex-base;
		padding: 0 20upx;
		box-sizing: border-box;
		height: 80upx;
		margin-bottom: 20upx;
	}
	.shop-column__op{
		width: 10upx;
		height: 10upx;
	}
	.shop-column__active{
		color: @font-orange-color;
	}
	.shop-column__price{
		position: relative;
		padding-right: 30rpx;
		&::before{
			content: '';
			display: block;
			width: 0;
			border: 10rpx solid @f;
			border-top: none;
			border-bottom-color: @font-orange-color;
			position: absolute;
			right: 0;
			top: 8rpx;
		}
		&::after{
			content: '';
			display: block;
			width: 0;
			border: 10rpx solid @f;
			border-bottom: none;
			border-top-color: @font-dark-color;
			position: absolute;
			right: 0;
			bottom: 6rpx;
		}
	}
	
	.shop-column__price2{
		position: relative;
		padding-right: 30rpx;
		&::before{
			content: '';
			display: block;
			width: 0;
			border: 10rpx solid @f;
			border-top: none;
			border-top-color: @font-dark-color;
			position: absolute;
			right: 0;
			top: 8rpx;
		}
		&::after{
			content: '';
			display: block;
			width: 0;
			border: 10rpx solid @f;
			border-bottom: none;
			border-top-color: @font-orange-color;
			position: absolute;
			right: 0;
			bottom: 6rpx;
		}
	}
	
</style>
